<template>
  <div style="height:90%;width:100%;">
    <div class="basicCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "basicIncome",
  props: {
    mainAndbasic: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    mainAndbasic(val){
     console.log(val)
     this.getPie(val);
    }
  },
  methods: {
    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".basicCanvas"));
      let option = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            }
          },
        legend: {
             data: ['主营收入完成率', '基本面收入完成率'],
             // bottom: '20px',
            },


        grid: {
          left: "70px",
          right: "20px",
          bottom:'30px',

         },
        xAxis: {
          type: 'category',
          // boundaryGap: false,

          // axisLabel: {
          //   interval:0,
          //   rotate:40 ,
          //   },
          data:val.mainAnalysis.xAxis
          },
        yAxis: [
              {
                  type: 'value',
                  min: 0,
                  splitLine:{show: false},  //去除网格线
                  // max: maxData*2,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value} %',
                      show:false
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },
              {
                  type: 'value',
                  // min: (minData-(minData+maxData1)%2)*2.2,
                  // // max: 100,
                  // // interval: 50,
                  splitLine:{show: false},  //去除网格线
                  axisLabel: {
                      formatter: '{value} 亿元',
                      show:false
                  },
                  splitArea:{
                      show:true,
                      areaStyle:{
                          color:'#f5f5f5'
                      },
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              }

            ],

        series: [
         {
          type: "bar",
          name: '主营收入完成率',
          data: val.mainAnalysis.yAxis,
          barWidth :20,
         itemStyle: {
                     normal: {
                         // 随机显示
                         //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                         // 定制显示（按顺序）
                         color: function(params) {
                             var colorList = ['#c00000','#0070c0'];
                             return colorList[params.dataIndex]
                         }
                     },
                 },
        },
          {
            type: "line",
             name: '基本面收入完成率',
            smooth: true,
             yAxisIndex: 1,
            data: val.basicAnalysis.yAxis,
            lineStyle: {
                   normal: {
                       color: "#00b050", // 线条颜色
                       width: 0.8
                   }
            },
          },
      ],
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
